@font-face {
  font-family: "JetBrainsMono";
  src: url(/static/font/JetBrainsMono-Regular.ttf);
}

[container] {
  max-width: 2048px;
}

:root,:host {
  font-size: 15px;
  font-family: 'JetBrainsMono,Helvetica,Arial,sans-serif';
  --w-prompt-bg-color: #f7f9fc;
  scrollbar-width: thin;
  scrollbar-color: #c0c2c2 #efefef;
}

h1,h2,h3,h4,h5,h6,p,span,div {
  font-family: 'JetBrainsMono,Helvetica,Arial,sans-serif';
}

button:hover,input[type=submit]:hover {
  font-weight: bold;
  transform: scale(1.05);
}

button:active,input[type=submit]:active {
  font-style: italic;
  transform: scale(0.98);
}

button,[button] {
  background: #148de3;
  border-radius: 0.123rem;
}

textarea:focus {
  outline: none;
  border:solid 1px #27a3fb;
}

input:not([type=submit]):not([type="range"]),select,textarea {
  border:solid 1px #d1d2d3;
}

input:not([type=submit]):focus {
  outline: none;
  border:solid 1px #27a3fb;
}

input[type=submit] {
  /* background: #a84e70; */
  background:#248ad3;
  border-radius: 0.123rem;
}

input[ok] {
  background: #1ba3a3;
}

a {
  color: #252f3e;
}

.short-input,[short-input] {
  width: 60%;
}

.middle-input,[middle-input] {
  width: 80%;
}

.long-input,[long-input] {
  width:100%;
}

.editor-area {
  min-height: 25rem;
  overflow: auto;
  margin-top: 0.15rem;
}

.btn-circle,[btn-circle] {
  width: 2.64rem;
  height: 2.64rem;
  border-radius: 1.32rem;
  background-color: #f5f6f8;
  box-shadow: var(--w-common-shadow, -0.12rem 0.2rem 0.23rem rgba(125, 125, 125, 0.56));
  line-height: 2.64rem;
  text-align: center;
  font-size: 89%;
  color: #4a4a4f;
  overflow: hidden;
  margin-left: 0.28rem;
  margin-right: 0.28rem;
  cursor: pointer;
  margin-bottom:0.36rem;
  user-select: none;
}

.btn-block,[btn-block] {
  width: 2.8rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 0.25rem;
}

.btn-orange,[btn-orange] {
  background: #ee5832;
  color: #424345;
}

.btn-light-gray,[btn-light-gray] {
  background: #dfdfe1;
  color: #424345;
}

.btn-dark,[btn-dark] {
  background: #6a6a6a;
  color: #dfdfdf;
}

.btn-dark-rgba,[btn-dark-rgba] {
  background: rgba(105, 105, 105, 0.58);
  color: #dfdfdf;
}

.btn-blue,[btn-blue] {
  background: #6183e9;
  color: #38383b;
}

.btn-red,[btn-red] {
  background: #ca4545;
  color: #424245;
}

.btn-ok,[btn-ok] {
  background: #3ca8bb;
  color: #424345;
}

.testok {
  background: #d9dde0;
}

.btn-red,[btn-red] {
  background: #e44a82;
  color: #424345;
}

.btn-pblue, [btn-pblue] {
  background: #5e5ef5;
  color: #2f2f30;
}

.btn-gray, [btn-gray] {
  background: #787980;
  color: #fafafa;
}

.a-menu,[a-menu] {
  text-decoration: none;
  color: #4a4a59;
}

.spana,[spana] {
  cursor: pointer;
  padding: 0.25rem;
  color: #4a4a68;
  line-height: 120%;
  user-select: none;
}

.align-center,[align-center] {
  text-align: center;
}

.align-left, [align-left] {
  text-align: left;
}

.align-right,[align-right] {
  text-align: right;
}

.alert-text, [alert-text] {
  color: #d73616;
}

.bold, [bold] {
  font-weight: bold;
}

.very-large,[ver-large] {
  font-size: 235%;
}

.large,[large] {
  font-size: 169%;
}

.big,[big] {
  font-size: 128%;
}

.middle,[middle] {
  font-size: 93.7%;
}

.small,[small] {
  font-size: 86.5%;
}

.small2,[small2] {
  font-size: 81%;
}

.tiny,[tiny] {
  font-size: 73%;
}

.vtiny,[vtiny] {
  font-size: 69%;
}

.helper, [helper] {
  font-size: 85%;
  color: #676869;
}

.italic,[italic] {
  font-style: italic;
}

.helper-light, [helper-light] {
  font-size: 86%;
  color: #dfdfe2;
}

.padding-0-25,[padding-0-25] {
  padding: 0.25rem;
}

.padding-0-5,[padding-0-5] {
  padding: 0.5rem;
}

.padding-0-8,[padding-0-8] {
  padding: 0.8rem;
}

.padding,[padding] {
  padding: 1rem;
}

.mtop-0-5,[mtop-0-5] {
  margin-top: 0.5rem;
}

.mleft-0-5,[mleft-0-5] {
  margin-left: 0.5rem;
}

.mright-0-5,[mright-0-5] {
  margin-right: 0.5rem;
}

.mbottom-0-5,[mbottom-0-5] {
  margin-bottom: 0.5rem;
}

.mtop,[mtop] {
  margin-top: 1rem;
}

.mtop-2, [mtop-2] {
  margin-top: 2rem;
}

.mbottom,[mbottom] {
  margin-bottom: 1rem;
}

.ok,[ok] {
  color: #219e99;
}

.success,[success],[done] {
  color: #1b7966;
}

.image,[image] {
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 0.1rem;
}

.card-head,[card-head] {
  font-weight: 680;
}

.card, [card] {
  padding: 0.6rem;
  border-radius: 0.18rem;
  box-shadow: 0.2rem 0.2rem 0.2rem #efeff2;
  margin: 0.8rem auto;
}

.inset-shadow,[inset-shadow] {
  box-shadow: 0px 0.1rem 1.2rem 0.125rem rgba(15, 15, 15, 0.1),inset 0px -0.1rem 0px 0px rgba(15,15,15,0.1);
}

.text-shadow, [text-shadow] {
  text-shadow: 2px 2px 2px #d7d8d9;
}

.linear-button, [linear-button] {
  padding:0.2rem 0.9rem;
  border-radius:0.9rem;
  background:linear-gradient(-36deg, #e6e7e9, #c2e1f5);
  user-select: none;
}

.linear-button-big,[linear-button-big] {
  padding:0.5rem 1.2rem;
  border-radius:1.2rem;
  background:linear-gradient(-36deg, #e6e7e9, #c2e1f5);
  user-select: none;
}

.linear-gray, [linear-gray] {
  background:linear-gradient(-36deg, #e6e7e9, #d9dbdc);
}

.linear-orange, [linear-orange] {
  background:linear-gradient(-36deg, #e6e7e9, #d87757);
}

.linear-blue, [linear-blue] {
  background:linear-gradient(-36deg, #d5d2d2, #4cb5ea);
}

.linear-morning, [linear-morning] {
  background:linear-gradient(-36deg, #eccdb5, #4cb5ea);
}

.card-space, [card-space] {
  margin: 0.38rem auto;
}

.icon-tiny, [icon-tiny] {
  width: 0.9rem;
  height: auto;
}

.icon-small, [icon-small] {
  width: 1.1rem;
  height: auto;
}

.icon-middle, [icon-middle] {
  width: 1.23rem;
  height: auto;
}

.icon, [icon] {
  width: 1.68rem;
  height: auto;
}

.icon-large,[icon-large] {
  width: 2.3rem;
  height: auto;
}

.icon-huge,[icon-huge] {
  width: 4.2rem;
  height: auto;
}

.block,[block] {
  border: #e5e8e9 solid 1px;
  padding: 0.35rem;
}

.select,[select] {
  background: #efeff2;
}

.select-blue,[select-blue] {
  background: #5689f9;
}

.content-preview {
  padding: 0.25rem;
  margin-bottom: 1rem;
  margin-top: 0.8rem;
}

table {
  width: 100%;
}

.lh188,[lh188] {
  line-height: 188%;
}

.lh158,[lh158] {
  line-height: 158%;
}

.lh2,[lh2] {
  line-height: 200%;
}

.lh2-5,[lh2-5] {
  line-height: 250%;
}

.line,[line] {
  height: 0.25rem;
  margin-bottom: 0.58rem;
  border-bottom: solid 1.1px #cdcdcf;
}

.blue-dark, [blue-dark],[dark-blue] {
  color: #1566b6;
}

.blue,[blue] {
  color: #2298ed;
}

.dark-green, [dark-green] {
  color: #1a615a;
}

.dark,[dark] {
  color: #32373d;
}

.dark-light,[dark-light] {
  color: #4f4f4f;
}

.red,[red] {
  color: #f33030;
}

.pink-red,[pink-red] {
  color:#d2315c;
}

.red-light,[red-light] {
  color: #dc3c3c;
}

.red-dark,[red-dark],[dark-red] {
  color: #b73333;
}

.orange,[orange] {
  color: #f17f42;
}

.orange-red,[orange-red] {
  color: #e7562a;
}

.gray,[gray] {
  color: #666666;
}

.gray-dark,[gray-dark],[dark-gray] {
  color: #505050;
}

.gp-red,[gp-red] {
  color:#ab5862;
}

.black-blue, [black-blue] {
  /* color: #181d27; */
  color: #1f2737;
}

.gray-blue, [gray-blue] {
  color: #3a4665;
}

.hide,[hide] {
  display: none;
  visibility: hidden;
}

.click,[click] {
  user-select: none;
  cursor: pointer;
}

a:hover,.click:hover,[click]:hover {
  font-weight: bold;
  text-shadow: 3px 2px 0.5rem #d1d1d1;
}

a:active,.click:active,[click]:active {
  font-size: 98.9%;
  transform: scale(0.969);
}

.click-middle:active,[click-middle]:active {
  font-size: 91%;
  text-decoration: none;
  transform: scale(0.958);
}

.click-small:active,[click-small]:active {
  font-size: 83.5%;
  text-decoration: none;
  transform: scale(0.958);
}

.select-none,[select-none] {
  user-select: none;
}

.center,[center] {
  display: grid;
  place-items: center;
}

.circle-image,[circle-image] {
  border-radius: 50%;
}

.overflow-hidden, [overflow-hidden] {
  overflow: hidden;
}

.overflow-hidden-x, [overflow-hidden-x] {
  overflow-x: hidden;
}

.overflow-hidden-y, [overflow-hidden-y] {
  overflow-y: hidden;
}

.text-ellipsis,[text-ellipsis] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 动画 */

.am-rotate,[am-rotate] {
  animation: rotate 0.9s 1;
}

@keyframes rotate {
  0% {transform: rotateZ(30deg);}
  16% {transform: rotateZ(60deg);}
  24% {transform: rotateZ(90deg);}
  32% {transform: rotateZ(120deg);}
  40% {transform: rotateZ(150deg);}
  48% {transform: rotateZ(180deg);}
  56% {transform: rotateZ(210deg);}
  64% {transform: rotateZ(240deg);}
  72% {transform: rotateZ(270deg);}
  80% {transform: rotateZ(300deg);}
  88% {transform: rotateZ(330deg);}
  100% {transform: rotateZ(360deg);}
}
